<template>
    <div class="join-us">
        <div class="join-us-left">
            <h2>发现精彩内容，<br />结识志同道合的朋友</h2>
            <p>这里有丰富的学习资源、活跃的技术讨论和优质的项目陪跑，助你成长！</p>
            <div>
                <a href="#">立即加入</a>
                <a href="#">浏览资源</a>
            </div>
        </div>
        <div class="join-us-right">
            <img src="/public/images/join-us.png" alt="">
        </div>
    </div>
</template>
<script setup lang="ts">

</script>
<style scoped>
.join-us {
    width: 72rem;
    height: 14.375rem;
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    margin: 9rem auto;
    gap: 7.5rem;
    .join-us-left {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;

        h2 {
            font-family: Inter;
            font-weight: 800;
            font-size: 2.6rem;
            line-height: 2.99rem;
            letter-spacing: 0%;
            color: #18181B;
        }

        p {
            font-family: Inter;
            font-weight: 400;
            font-size: 1.1rem;
            line-height: 1.65rem;
            letter-spacing: 0%;
            color: #6B7280;
        }

        div {
            display: flex;
            gap: 1.5rem;

            a {
                width: 8.75rem;
                height: 3.25rem;
                padding-top: 0.78125rem;
                padding-right: 2.2rem;
                padding-bottom: 0.8375rem;
                padding-left: 2.2rem;
                border-radius: 999px;
                background-color: #000;
                color: #fff;
                text-align: center;
                font-size: 1rem;
            }
            a:nth-child(2){
                background-color: #fff;
                color: #000;
                border: 1px solid #000;
            }
        }
    }

    .join-us-right {
        img {
            width: 31.9375rem;
            height: 21.25rem;
            min-width: 320px;
            border-radius: 1.5rem;

        }
    }
}</style>

